/* 整体上中下布局 */
.main-box {
  /* 全屏 */
  height: 100vh;
  /* 竖向的压力盒子 */
  display: flex;
  flex-direction: column;
}
/* 中间要占满 */
.center-box {
  flex: 1;
  /* overflow是内容超出时的处理方式，auto表示自动判断是否出现滚动条 */
  overflow-y: auto;
}

/* 上方布局 */
.top-box {
  display: flex;
  background-color: #dcdcdc;
  padding: 0.5rem 0px;
}

.top-box > div:first-child {
  flex: 1;
  text-align: center;
}

.top-box i {
  display: inline-block;
  margin-right: 0.5rem;
}

/* 下方布局 */
.bottom-box {
  display: flex;
  padding: 0.5rem 0px;
  background-color: #dcdcdc;
  justify-content: space-around;
  text-align: center;
}

.bottom-box i {
  font-size: 2rem;
}

.active {
  color: #0000aa;
}

/* 聊天区域样式 */
.chat-info {
  display: flex;
  padding: 0.5rem;
  align-items: center;
  border-bottom: 1px solid #dcdcdc;
}

.chat-left {
  font-size: 3rem;
}

.chat-right {
  flex: 1;
}

/* 聊天信息行 */
.chat {
  display: flex;
  font-size: 0.9rem;
  color: #777;
}

.chat > div:first-child {
  flex: 1;
}

.title {
  font-size: 1.1rem;
  color: #000;
}
